<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>药品管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!--查询参数的表单-->
<form class="layui-form layui-form-pane layui-margin-3" action="/toMedicine">

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">药品名称</label>
            <div class="layui-input-inline">
                <select name="name" id="name" lay-search>
                    <option value="">搜索或选择</option>
                    <option th:each="n : ${nameList}" th:value="${n}" th:text="${n}"></option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">国药准字</label>
            <div class="layui-input-inline">
                <select name="code" id="code" lay-search>
                    <option value="">搜索或选择</option>
                    <option th:each="c : ${codeList}" th:value="${c}" th:text="${c}"></option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="toDo">搜索药品</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--数据表格-->
<div class="layui-margin-3 layui-anim layui-anim-upbit">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--表格头部左端工具按钮-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="toAddData">添加药品信息</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
            <span>{{= d.lineStyle ? '多行显示' : '单行显示' }}模式</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
    </div>
</script>

<!--表格内容右端操作按钮-->
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer', 'dropdown', 'jquery'], function () {
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;
        let dropdown = layui.dropdown;
        let $ = layui.jquery;

        // 搜索按钮事件
        form.on('submit(toDo)', function (data) {
            let field = data.field; // 获取表单字段值

            table.reload('test', {  // 表格数据重载
                where: {
                    'name': field.name,
                    'code': field.code
                }
            });
            return false; // 阻止默认 form 跳转
        });

        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/getAllMedicineData',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', { // 表格右上角工具图标
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips',
                onClick: function (obj) {
                    layer.alert('业哥：这里自定义工具栏图标按钮');
                }
            }],
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            page: true,
            limit: 15,
            limits: [15, 30, 50],
            cols: [
                [
                    {field: 'id', title: 'ID', width: 60, hide: true},
                    {field: 'name', title: '药品名称', width: 150},
                    {field: 'code', title: '国药准字', width: 120, templet: '<div><span class="layui-badge layui-bg-gray">{{= d.code }}</span></div>'},
                    {field: 'specs', width: 150, title: '药品规格'},
                    {
                        field: 'compose',
                        title: '药品成分',
                        fieldTitle: '药品成分',
                        hide: 0,
                        minWidth: 300,
                        expandedMode: 'tips',
                        edit: 'text'
                    },
                    {
                        field: 'usage',
                        title: '用法用量',
                        edit: 'textarea',
                        minWidth: 300,
                        expandedWidth: 400
                    },
                    {field: 'image', title: '药品照片', width: 100, hide: true},
                    {field: 'origin', title: '生产厂家', width: 250},
                    {fixed: 'right', title: '相关操作', width: 120, templet: '#toolDemo', align: 'center'}
                ]
            ],
            done: function () {
                let id = this.id;

                // 行模式
                dropdown.render({
                    elem: '#rowMode',
                    data: [{
                        id: 'default-row',
                        title: '单行显示模式'
                    }, {
                        id: 'multi-row',
                        title: '多行显示模式'
                    }],
                    // 菜单被点击的事件
                    click: function (obj) {
                        let checkStatus = table.checkStatus(id)
                        let data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'default-row':
                                table.reload('test', {
                                    lineStyle: null // 恢复单行
                                });
                                layer.msg('已设为单行显示模式');
                                break;
                            case 'multi-row':
                                table.reload('test', {
                                    // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                    lineStyle: 'height: 95px;'  // 即通过设置 lineStyle 参数可开启多行
                                });
                                layer.msg('已设为多行显示模式');
                                break;
                        }
                    }
                });
            },
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'toAddData':
                    layer.open({
                        type: 2,
                        title: '添加药品信息',
                        area: ['1000px', '550px'],
                        scrollbar: false,
                        skin: 'layui-layer-molv',
                        content: ['/toMedicineAdd', 'no'],
                        end: function () {
                            table.reload(obj.config.id);
                        }
                    });
                    break;
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function (obj) {
            let data = obj.data; // 获得当前行数据

            if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    title: '编辑药品信息',
                    area: ['1000px', '560px'],
                    scrollbar: false,
                    shadeClose: true,
                    skin: 'layui-layer-lan',
                    content: '<div class="layui-padding-2 layui-row layui-col-space15" style="margin-top: 5px; margin-right: 0;">\n' +
                        '    <div class="layui-col-md12">\n' +
                        '        <form class="layui-form layui-form-pane">\n' +
                        '            <div class="layui-form-item layui-col-space20">\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label">药品名称</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <input type="text" name="name" autocomplete="off" value="' + data.name + '" class="layui-input" lay-verify="required">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label">国药准字</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <input type="text" name="code" autocomplete="off" value="' + data.code + '" class="layui-input" lay-verify="required">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label">药品规格</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <input type="text" name="specs" autocomplete="off" value="' + data.specs + '" class="layui-input" lay-verify="required">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label">用法用量</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <input type="text" name="usage" autocomplete="off" value="' + data.usage + '" class="layui-input" lay-verify="required">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label">包装照片</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <input type="text" name="image" autocomplete="off" value="' + data.image + '" class="layui-input" lay-verify="required">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="layui-col-md6">\n' +
                        '                    <label class="layui-form-label">生产厂家</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <input type="text" name="origin" autocomplete="off" value="' + data.origin + '" class="layui-input" lay-verify="required">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="layui-col-md12 layui-form-text">\n' +
                        '                    <label class="layui-form-label">药品成分</label>\n' +
                        '                    <div class="layui-input-block">\n' +
                        '                        <textarea name="compose" class="layui-textarea" lay-verify="required" maxlength="1000" rows="8">' + data.compose + '</textarea>\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '\n' +
                        '            <div class="layui-form-item layui-col-space20">\n' +
                        '                <div class="layui-col-md12" style="text-align: center;">\n' +
                        '                    <button class="layui-btn layui-bg-blue" lay-submit lay-filter="toSet">更新</button>\n' +
                        '                    <button type="reset" class="layui-btn layui-btn-primary">恢复</button>\n' +
                        '                </div>\n' +
                        '            </div>' +
                        '            <input hidden="hidden" name="id" value="' + data.id + '">\n' +
                        '        </form>\n' +
                        '    </div>\n' +
                        '</div>',
                    success: function (layero, index) {
                        // 表单提交事件
                        form.on('submit(toSet)', function (data) {
                            let field = data.field; // 获取表单字段值
                            $.ajax({
                                url: '/doSetMedicine',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(field),
                                success: function (res) {
                                    if (res.code) {
                                        layer.msg('更新成功！', {icon: 1});
                                        table.updateRow(obj.config.id, {    // 更新某行数据
                                            index: obj.index,
                                            data: field
                                        });
                                        layer.close(index); // 关闭当前弹出层
                                    } else {
                                        layer.msg('更新失败！', {icon: 2});
                                    }
                                },
                                error: function (err) {
                                    layer.msg('Ajax请求异常！', {icon: 0});
                                }
                            });
                            return false; // 阻止默认 form 提交
                        });
                    }
                });
            } else if (obj.event === 'more') {
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '详情',
                        id: 'detail'
                    }, {
                        title: '删除',
                        id: 'del'
                    }],
                    click: function (menudata) {
                        if (menudata.id === 'detail') {
                            layer.msg('当前药品ID:' + data.id);
                        } else if (menudata.id === 'del') {
                            layer.confirm('真的要删除【药品' + data.id + '】吗？', function (index) {

                                // 向服务端发送删除指令
                                $.ajax({
                                    url: '/doDelMedicine/' + data.id,
                                    type: 'GET',
                                    success: function (res) {
                                        if (res.code) {
                                            layer.msg('删除成功！', {icon: 1});
                                            obj.del(); // 删除对应行（tr）的DOM结构
                                            // table.reload(obj.config.id);
                                        } else {
                                            layer.msg('删除失败！', {icon: 2});
                                        }
                                    },
                                    error: function (err) {
                                        layer.msg('Ajax请求异常！', {icon: 0});
                                        console.log(err);
                                    }
                                });
                                layer.close(index); // 关闭询问框
                            });
                        }
                    },
                    id: 'dropdown-table-tool',
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                });
            }
        });
        // table 滚动时移除内部弹出的元素
        let tableInst = table.getOptions('test');
        tableInst.elem.next().find('.layui-table-main').on('scroll', function () {
            dropdown.close('dropdown-table-tool');
        });

        // 触发表格复选框选择
        table.on('checkbox(test)', function (obj) {
            console.log(obj)
        });

        // 触发表格单选框选择
        table.on('radio(test)', function (obj) {
            console.log(obj)
        });

        // 行单击事件
        table.on('row(test)', function (obj) {
            console.log(obj);
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
            console.log(obj);
        });

        // 单元格编辑事件
        table.on('edit(test)', function (obj) {
            let field = obj.field; // 得到字段
            let value = obj.value; // 得到修改后的值
            let data = obj.data; // 得到所在行所有键值
            // 值的校验
            if (field === 'email') {
                if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)) {
                    layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1});
                    return obj.reedit(); // 重新编辑 -- v2.8.0 新增
                }
            }
            // 编辑后续操作，如提交更新请求，以完成真实的数据更新
            layer.msg('编辑未保存', {icon: 1});

            // 其他更新操作
            let update = {};
            update[field] = value;
            obj.update(update);
        });
    });
</script>
</body>
</html>